<template>
  <!-- 实验统计和理论统计 -->
  <div id="statistics-experiment">
    实验统计
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content">
          <div class="clearfix">
            <span class="fl preview-title">{{ courseName }}</span>
            <span class="fl preview-line">/</span>
            <span :title="chapterName" style="max-width:160px;" class="fl beyond-hiding">{{ chapterName }}</span>
            <span class="fl">{{ className }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn2-box">
        <div class="button-style2" @click="downLoads">
            数据统计
            <i class="iconfont icon-tubiaozhizuo-"></i>
        </div>
    </div>
    <div class="se-content">
<!-- 理论 -->
      <div v-if="isShowLl">
        <el-row :gutter="20" style="margin-bottom:0;">
          <el-col :span="18">
            <div class="se-box" style="height:520px;">
              <div class="se-title-box">
                <div class="se-title">理论课总时长</div>
              </div>
              <div class="se-main">
                <div id="mychartBar4" style="width: 900px;height:420px;"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="se-box">
                  <div class="se-title-box">
                    <div class="se-title">问答题提问</div>
                  </div>
                  <div class="se-main">
                    <div id="mychartBar5" style="width: 280px;height:200px;"></div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="se-box">
                  <div class="se-title-box">
                    <div class="se-title">判断题提问</div>
                  </div>
                  <div class="se-main">
                    <div id="mychartBar6" style="width: 280px;height:200px;"></div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="se-box" style="height:440px;">
              <div class="se-title-box">
                <div class="se-title">随堂练习分数 
                  <span style="margin-left:10px;" v-if="chart7Data"><span>{{ chart7Data.committedUserCount }}</span>/{{ chart7Data.countUser }}</span>
                </div>
                <div class="blue">
                  <el-tooltip class="item" effect="dark" content="该平均分为已批阅的学生平均分数" placement="bottom">
                      <i  class="iconfont icon-wenti-m"></i>
                  </el-tooltip>
                  平均分：{{ chart7Data.average }}分
                </div>
              </div>
              <div class="se-main">
                <div id="mychartBar7" style="width: 1200px;height:350px;"></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
<!-- 理论 end -->
<!-- 多任务tab -->
      <div v-if="type==4" class="ids-groups clearfix">
        <div @click="getDataTask(item.id,index)" :class="{'active':taskActive == index}" v-for="(item,index) in dataIds" :key="index">
          任务{{ index+1 }}
        </div>
      </div>
      <div v-if="type==4" style="font-size:18px;padding: 0 0 20px 10px;">{{ nameChart1 }}</div>
<!-- 多任务end -->
<!-- 实验 -->
      <div v-if="isShowSy">
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="se-box" style="height:440px;">
              <div class="se-title-box">
                <div class="se-title">实验课总时长</div>
              </div>
              <div class="se-main">
                <div id="mychartBar" style="width: 1200px;height:350px;"></div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="se-box" style="height:440px;">
              <div class="se-title-box">
                <div class="se-title">实验报告分数 <span style="margin-left:50px;">提交人数：{{ chart2Data.commitUsers }}/{{ chart2Data.allUsers }}</span></div>
                <span class="blue">
                  <el-tooltip class="item" effect="dark" content="该平均分为已批阅的学生平均分数" placement="bottom">
                      <i  class="iconfont icon-wenti-m"></i>
                  </el-tooltip>
                  平均分：{{ chart2Data.average }}分
                </span>
              </div>
              <div class="se-main">
                <div id="mychartBar2" style="width: 1200px;height:350px;"></div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="se-box" style="height:500px;">
              <div class="se-title-box">
                <div class="se-title">实验通过检测情况</div>
              </div>
              <div style="padding:0px 20px 40px;font-size: 14px;line-height: 20px;color: #adadad;">注释：1、设置实验判定：学生做实验通过预设的实验判定则检测通过。2、未设置实验判定：学生浏览过所有实验手册内容即检测通过。</div>
              <div class="se-main">
                <!-- 2021-01-26注释 -->
                <div v-show="showPie" style="display:flex;">
                  <div id="mychartBar3" style="width: 600px;height:360px;"></div>
                  <div v-if="decideDto" style="margin-left:50px;">
                    <div
                      style="font-size:18px; text-align:center; line-height:30px;margin-bottom:20px;"
                    >未通过学生({{ decideDto.noPassUserCount }}/{{ decideDto.passUserCount+decideDto.noPassUserCount }})</div>
                    <!-- 2021-01-26注释 -->
                    <el-table :data="decideDto.noPassUsers" height="310" style="width: 500px;">
                      <el-table-column label="序号" type="index" width="50"></el-table-column>
                      <el-table-column label="姓名">
                        <template slot-scope="scope">
                          <div>{{ scope.row }}</div>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
<!-- 实验 end -->
    </div>
  </div>
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
import $ from "jquery";
//导出word
import "../../../../static/wordExport/jquery.wordexport";
export default {
  data() {
    return {
      //是否显示饼图
      // showPie:this.$route.query.showPie-0,
      showPie:1,
      //学习
      lineStudy:'',
      //视频
      lineVideo:'',
      //通过率
      piePass:'',
      //班级id
      classId: this.$route.query.classId,
      // 课程ID
      courseId: this.$route.query.courseId,
      //章节id
      chapterId: this.$route.query.chapterId,
      //课程名称
      courseName: this.$route.query.courseName,
      //章节名称
      chapterName: this.$route.query.chapterName,
      //班级名称
      className: this.$route.query.className,
      //课程类型
      type:this.$route.query.type,
      //类似学生id
      checkingId: this.$localstorage.getLocalStorage("checkingId"),
      paramsData: {},
      //接收的题目列表
      resData: "",
      chart4Data:[],
      //实验id数组
      dataIds:[],
      //多任务实验第几个
      taskActive:0,
      //实验判定数据
      decideDto:'',
      //实验名称？
      nameChart1:'',
      //
      chart2Data:{
        allUsers:0,
        average:0,
        commitUsers:0,
      },
      chart7Data:'',
     
    };
  },
  computed: {
    //是否显示理论统计
    isShowLl(){
      //1 理论
      //2 实验
      //3 理论单任务
      //4 理论多任务
      let self = this;
      let type = self.type;
      if(type == 2){
        return false;
      }
      return true;
    },
    //是否显示实验统计
    isShowSy(){
      //1 理论
      //2 实验
      //3 理论单任务
      //4 理论多任务
      let self = this;
      let type = self.type;
      if(type == 1){
        return false;
      }
      return true;
    },
  },
  created() {
    let self = this;
    self.courseId = this.$localstorage.getLocalStorage("setCourseId");
  },
  mounted() {
    this.init();
  },
  methods: {
    init(){
      if(this.isShowLl){
        this.llChartLoading();
        this.getChart4Data();
        this.getChart5Data();
        this.getChart6Data();
        this.getChart7Data();
      }
      if(this.isShowSy){
        this.getDataIds();
      }
    },
    llChartLoading(){
      //理论
      let myChart4 = echarts.init(document.getElementById('mychartBar4'));
      let myChart5 = echarts.init(document.getElementById('mychartBar5'));
      let myChart6 = echarts.init(document.getElementById('mychartBar6'));
      let myChart7 = echarts.init(document.getElementById('mychartBar7'));
      myChart4.showLoading({
          text: '数据正在加载...',
      });
      myChart5.showLoading({
          text: '数据正在加载...',
      });
      myChart6.showLoading({
          text: '数据正在加载...',
      });
      myChart7.showLoading({
          text: '数据正在加载...',
      });
    },
    syChartLoading(){
      //实验
      let myChart = echarts.init(document.getElementById('mychartBar'));
      let myChart2 = echarts.init(document.getElementById('mychartBar2'));
      let myChart3 = echarts.init(document.getElementById('mychartBar3'));
      myChart.showLoading({
          text: '数据正在加载...',
      });
      myChart2.showLoading({
          text: '数据正在加载...',
      });
      myChart3.showLoading({
          text: '数据正在加载...',
      });
    },
    
//理论数据
    getChart4Data(){
      let self = this;
      let courseId = self.courseId;
      let chapterId = self.chapterId;
      self.$http
        .post(`/tes/course/chapter/statistics/chapterLearnTime`,{
          courseId:courseId,
          chapterId:chapterId,
        })
        .then(response => {
          let res = response.data;
          if(res.code == 200){
            console.log(res.data,2223354);
            self.chart4Data = res.data;
            self.drawChart4(res.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getChart5Data(){
      let self = this;
      let classId = self.classId;
      let chapterId = self.chapterId;
      self.$http
        .get(`/tes/quiz/statistics/essayQuestion?defaultClassId=${classId}&chapterId=${chapterId}`)
        .then(response => {
          let res = response.data;
          if(res.code == 200){
            console.log(res.data,222334);
            self.drawChart5(res.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getChart6Data(){
      let self = this;
      let classId = self.classId;
      let chapterId = self.chapterId;
      self.$http
        .get(`/tes/quiz/statistics/trueOrFalseQuestions?defaultClassId=${classId}&chapterId=${chapterId}`)
        .then(response => {
          let res = response.data;
          if(res.code == 200){
            console.log(res.data,222334);
            self.drawChart6(res.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getChart7Data(){
      let self = this;
      let courseId = self.courseId;
      let chapterId = self.chapterId;
      let classId = self.classId;
      self.$http
        .get(`/tes/course/${courseId}/chapter/${chapterId}/practice/chapterStatistics?chapterId=${chapterId}&classId=${classId}`)
        .then(response => {
          let res = response.data;
          if(res.code == 200){
            console.log(res.data,222334);
            self.chart7Data = res.data;
            self.drawChart7(res.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
//理论数据end
//理论
    drawChart4(data) {
      console.log(data,312);
      let self = this;
      let xAxisData = data.map(item=>item.userName);
      let videoTimeData = data.map(item=>item.videoTimeHour);
      let learnTimeData = data.map(item=>item.learnTimeHour);
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("mychartBar4"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          //text: 'ECharts 入门示例'
        },
        legend:{
          right:50,
          data:['学习总时长','视频总时长']
        },
        grid:{
          right:50
        },
        tooltip: {
          trigger: "axis",
          formatter:function(param){
            let index = param[0].dataIndex;
            let name = `姓名：${param[0].axisValue}`;
            let learnStr = `${param[0].seriesName}：${data[index].learnTimeStr}`;
            let videoStr = `${param[1].seriesName}：${data[index].videoTimeStr}`;
            return `${name}<br/>${learnStr}<br/>${videoStr}`
          },
        },
        dataZoom: [
          {
            type: "inside"
          },
          {
            type: "slider",
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
          }
        ],
        xAxis: {
          // name: "姓名",
          data: xAxisData
        },
        yAxis: {
          name: "总时长",
          axisLabel: {
              formatter: '{value} 小时'
          }
        },

        series: [
          {
            name:'学习总时长',
            type: "bar",
            data: learnTimeData,
            itemStyle:{
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#91abf4'
                    }, {
                        offset: 1,
                        color: '#766fd1'
                    }]),
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#91abf4'
                    }, {
                        offset: 1,
                        color: '#766fd1'
                    }]),
                }
            },
          },
          
          {
            name:'视频总时长',
            type: "bar",
            data: videoTimeData,
            itemStyle:{
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#66b7cc'
                    }, {
                        offset: 1,
                        color: '#a0dadf'
                    }]),
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#66b7cc'
                    }, {
                        offset: 1,
                        color: '#a0dadf'
                    }]),
                }
            },
          }
        ]
      };
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.hideLoading();
    },
    drawChart5(data) {
      let self = this;
      let yData = data.excellent;
      let lData = data.good;
      let cData = data.poor;
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("mychartBar5"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          show:false,
          left: "center"
        },
        tooltip: {
          formatter: "{b}：{c}人"
        },
        legend: {
          show:false,
          data: ["优","良","差"],
          bottom: 0
        },
        itemStyle:{
          borderWidth:1,
          borderColor:'#fff'
        },
        series: [
          {
            type: "pie",
            radius:['35%','60%'],
            label: {
              formatter: "{b}{c}"
            },
            data: [
              {
                name: "优",
                value: yData,
                itemStyle: {
                  color: "#41c4ff"
                },
                emphasis: {
                  itemStyle: {
                    color: "#41c4ff",
                    opacity:'.8'
                  }
                }
              },
              {
                name: "良",
                value: lData,
                itemStyle: {
                  color: "#fc8c8e"
                },
                emphasis: {
                  itemStyle: {
                    color: "#fc8c8e",
                    opacity:'.8'
                  }
                }
              },
              {
                name: "差",
                value: cData,
                itemStyle: {
                  color: "#fdb75f"
                },
                emphasis: {
                  itemStyle: {
                    color: "#fdb75f",
                    opacity:'.8'
                  }
                }
              }
            ]
          }
        ]
      };

      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.hideLoading();
    },
    drawChart6(data) {
      let self = this;
      let zq = data.correct;
      let cw = data.inCorrect;
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("mychartBar6"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          show:false,
          left: "center"
        },
        tooltip: {
          formatter: "{b}：{c}人"
        },
        legend: {
          show:false,
          data: ["正确", "错误"],
          bottom: 0
        },
        itemStyle:{
          borderWidth:1,
          borderColor:'#fff'
        },
        series: [
          {
            type: "pie",
            radius:['35%','60%'],
            label: {
              formatter: "{b}{c}"
            },
            data: [
              {
                name: "正确",
                value: zq,
                itemStyle: {
                  color: "#41c4ff"
                },
                emphasis: {
                  itemStyle: {
                    color: "#41c4ff",
                    opacity:'.8'
                  }
                }
              },
              {
                name: "错误",
                value: cw,
                itemStyle: {
                  color: "#fc8c8e"
                },
                emphasis: {
                  itemStyle: {
                    color: "#fc8c8e",
                    opacity:'.8'
                  }
                }
              }
            ]
          }
        ]
      };

      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.hideLoading();
    },
//随堂练习分数
    drawChart7(data) {
      let self = this;
      //给未提交的x轴加个颜色
      console.log(data,4321);
      let filterUncommittedUsers = data.uncommittedUsers.map(item=>item.studentName).map(item=>{
        let obj = {
          value:`${item}`,
          textStyle:{
            color:'#fda540'
          },
        };
        return obj;
      });
      console.log(filterUncommittedUsers,4321);
      //已提交和未提交
      let xAxisData = data.committedUsers.map(item=>item.studentName).concat(filterUncommittedUsers);
      let seriesData = data.committedUsers.map(item=>item.score).concat(data.uncommittedUsers.map(item=>item.score));
      console.log(xAxisData,23);
      console.log(seriesData,23);
      let avg = data.average;
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("mychartBar7"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          //text: 'ECharts 入门示例'
        },
        tooltip: {
          trigger: "axis",
          formatter: function(param) {
            console.log(param);
            let index = param[0].dataIndex;
            let name = "姓名：" + param[0].axisValue;
            let score = "分数：" + param[0].value + "分";
            let num = `名次：第${index+1}名`;
            return `${name}<br/>${score}<br/>${num}`;
            return name + "<br/>" + score + "<br/>";
          }
        },
        dataZoom: [
          {
            type: "inside"
          },
          {
            type: "slider",
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
          }
        ],
        legend: {
          //data:['销量']
        },
        xAxis: {
          // name: "姓名",
          data: xAxisData
        },
        yAxis: {
          // name: "实验学习总时长",
          axisLabel: {
              formatter: '{value} 分'
          }
        },

        series: [
          {
            type: "bar",
            data: seriesData,
            itemStyle:{
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3a69fd'
                    }, {
                        offset: 1,
                        color: '#33a9fe'
                    }]),
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#3a69fd'
                    }, {
                        offset: 1,
                        color: '#33a9fe'
                    }]),
                }
            },
            markLine: {
              data: [
                {
                    silent:false,  
                    label:{
                        formatter:`平均分: ${avg}`,
                    },
                    yAxis:avg           // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
              
                }
              ]
            }
          }
        ]
      };
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.hideLoading();
    },
//理论 end
//实验
    //获取id数组
    getDataIds(){
      let self = this;
      let courseId = self.courseId;
      let chapterId = self.chapterId;
      let classId = self.classId;
      self.$http
        .get(`/tes/course/${courseId}/chapter/statistics/getChapterTaskId?chapterId=${chapterId}&classId=${classId}`)
        .then(response => {
          let res = response.data;
          if(res.code == 200){
            self.dataIds = res.data;
            //默认第一个
            self.getDataTask(res.data[0].id,0);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getDataTask(taskId,index){
      let self = this;
      self.taskActive = index;
      //实验loading
      self.syChartLoading();
      let courseId = self.courseId;
      let chapterId = self.chapterId;
      let classId = self.classId;
      self.$http
        .get(`/tes/course/${courseId}/chapter/statistics/experimentChapterStatistics?taskId=${taskId}&classId=${classId}`)
        .then(response => {
          let res = response.data;
          if(res.code == 200){
            console.log(res.data,22342);
            self.nameChart1 = res.data.timeDtO.name;
            self.drawChart1(res.data);
            self.drawChart2(res.data);
            self.drawChart3(res.data);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    drawChart1(data) {
      let self = this;
      console.log(data,3333);
      data = data.timeDtO;
      let xData = data.attendData.map(item=>item.userName);
      //学习
      let learnTimeData = data.attendData.map(item=>item.learnTime);
      //视频
      let videoTimeData = data.attendData.map(item=>item.videoTime);
      //AttendData 
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("mychartBar"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          //text: 'ECharts 入门示例'
        },
        tooltip: {
          trigger: "axis",
          formatter:function(param){
            console.log(param[0]);
            let index = param[0].dataIndex;
            let name = `姓名：${param[0].axisValue}`;
            let learnStr = `${param[0].seriesName}：${data.attendData[index].learnTimeStr}`;
            let videoStr = `${param[1].seriesName}：${data.attendData[index].videoTimeStr}`;
            return `${name}<br/>${learnStr}<br/>${videoStr}`
          },
        },
        dataZoom: [
          {
            type: "inside"
          },
          {
            type: "slider",
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
          }
        ],
        legend: {
          right:150,
          data:['学习总时长','视频总时长'],
        },
        xAxis: {
          // name: "姓名",
          data: xData
        },
        yAxis: {
          name: "",
          axisLabel: {
              formatter: '{value} 小时'
          }
        },

        series: [
          {
            name:'学习总时长',
            type: "bar",
            data: learnTimeData,
            itemStyle:{
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3f9dff'
                    }, {
                        offset: 1,
                        color: '#3a6dff'
                    }]),
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#3f9dff'
                    }, {
                        offset: 1,
                        color: '#3a6dff'
                    }]),
                }
            },
          },
          {
            name:'视频总时长',
            type: "bar",
            data: videoTimeData,
            itemStyle:{
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#23b0cb'
                    }, {
                        offset: 1,
                        color: '#97dddc'
                    }]),
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#23b0cb'
                    }, {
                        offset: 1,
                        color: '#97dddc'
                    }]),
                }
            },
          }
        ]
      };
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.hideLoading();
    },
    drawChart2(data) {
      let self = this;
      data = data.reportDto;
      //给未提交的x轴加个颜色
      console.log(data,4321);
      self.chart2Data = data;
      let filterUncommittedUsers = data.notAttendData.map(item=>item.userName).map(item=>{
        let obj = {
          value:`${item}`,
          textStyle:{
            color:'#fda540'
          },
        };
        return obj;
      });
      console.log(filterUncommittedUsers,4321);
      //已提交和未提交
      let xAxisData = data.attendData.map(item=>item.userName).concat(filterUncommittedUsers);
      let seriesData = data.attendData.map(item=>item.score).concat(data.notAttendData.map(item=>item.score));
      console.log(xAxisData,23123);
      console.log(seriesData,23123);
      let avg = data.average || 0;
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("mychartBar2"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          //text: 'ECharts 入门示例'
        },
        tooltip: {
          trigger: "axis",
          formatter: function(param) {
            let index = param[0].dataIndex;
            let name = "姓名：" + param[0].axisValue;
            let score = "分数：" + param[0].value + "分";
            let num = `名次：第${index+1}名`;
            return `${name}<br/>${score}<br/>${num}`;
          }
        },
        dataZoom: [
          {
            type: "inside"
          },
          {
            type: "slider",
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
          }
        ],
        legend: {
          //data:['销量']
        },
        xAxis: {
          // name: "姓名",
          data: xAxisData
        },
        yAxis: {
          // name: "实验学习总时长",
          axisLabel: {
              formatter: '{value} 分'
          }
        },

        series: [
          {
            type: "bar",
            data: seriesData,
            itemStyle:{
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#3a69fd'
                    }, {
                        offset: 1,
                        color: '#33a9fe'
                    }]),
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#3a69fd'
                    }, {
                        offset: 1,
                        color: '#33a9fe'
                    }]),
                }
            },
            markLine: {
              data: [
                {
                    silent:false,  
                    label:{
                        formatter:`平均分: ${avg}`,
                    },
                    yAxis:avg           // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
              
                }
              ]
            }
          }
        ]
      };
      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.hideLoading();
    },
    drawChart3(data) {
      let self = this;
      data = data.decideDto;
      self.decideDto = data;
      //通过
      let passUserCount = data.passUserCount;
      //未通过
      let noPassUserCount = data.noPassUserCount;
      //通过率
      let tgl = data.passingRate;
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("mychartBar3"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: "通过率："+ tgl +"%",
          left: "center",
          textStyle:{
            fontWeight:'normal'
          }
        },
        tooltip: {
          formatter: "{b}：{c}人"
        },
        legend: {
          data: ["通过", "未通过"],
          bottom: 0
        },
        series: [
          {
            type: "pie",
            radius:'60%',
            label: {
              formatter: "{c}"
            },
            data: [
              {
                name: "未通过",
                value: noPassUserCount,
                itemStyle: {
                  color: "#f5585f"
                },
                emphasis: {
                  itemStyle: {
                    color: "#fa767c"
                  }
                }
              },
              {
                name: "通过",
                value: passUserCount,
                itemStyle: {
                  color: "#33bef7"
                },
                emphasis: {
                  itemStyle: {
                    color: "#5fcefc"
                  }
                }
              }
            ]
          }
        ]
      };

      myChart.clear();
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.hideLoading();
    },
//实验 end
    //下载
    downLoads() {
      let self = this;
      console.log(self.resData,111);
      let courseId = self.courseId;
      let courseName = self.courseName;
      let chapterId = self.chapterId;
      let chapterName = self.chapterName;
      let classId = self.classId;
      let className = self.className;
      let obj = {
        // pass:self.resData[0].pass,
        // studyAndVideoTime:self.resData[0].studyAndVideoTime
        chapterId:chapterId,
        classId:classId
      };
      self.$http
        .post(
          `/tes/course/${courseId}/chapter/statistics/chapterStatisticsDownLoad?classId=${classId}&chapterId=${chapterId}`,
          {},
          { responseType: "blob" }
        )
        .then(response => {
          console.log(response,1234);
          let contentType = response.headers["content-type"];
          if (contentType == "application/json;charset=UTF-8") {
            self.$message.error(response.headers["code-message"]);
          } else {
            let blob = new Blob([response.data], {
              type: response.headers["content-disposition"]
            });
            let fileName = chapterName + "统计.xls";
            let url = window.URL.createObjectURL(blob);
            let downloadElement = document.createElement("a");
            downloadElement.style.display = "none";
            downloadElement.href = url;
            downloadElement.download = fileName; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(url);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
body {
  background: #f8f8f8;
}
#statistics-experiment {
  .ids-groups{
    padding:5px 10px 20px 5px;
    > div{
      float:left;
      font-size: 16px;
      color:#8b8b8b;
      padding: 10px 16px;
      border-radius: 4px;
      cursor: pointer;
    }
    .active{
      background:#d6e5f6;
      color:#2481ec;
    }
  }
  .se-content{
    background: #f8f8f8;
    min-height: 500px;
    width: 1200px;
    margin: 0px auto 100px;
    color: #727272;
    .el-row{
        margin-bottom:20px;
    }
    .se-box{
      min-height:240px;
      font-size: 16px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);    
      background: #fff;
      border-radius: 3px;
      .se-title-box{
        line-height: 30px;
        font-size: 16px;
        display:flex;
        justify-content: space-between;
        padding:10px 20px;
        .se-title{

        }
        .blue{
          color: #385899;
        }
      }
    }
  }
















    .btn2-box{
        width:1200px;
        margin: 0 auto 20px;
        text-align: right;
    }
    .button-style2{
        cursor: pointer;
        background:#3d93f5;
        border-radius: 4px;
        color:#fff;
        padding:12px 16px 8px;
        display: inline-block;
    }
  .row-title {
    display: flex;
    justify-content: space-between;
    color: #474747;
    font-size: 16px;
    line-height: 40px;
    .blue {
      color: #385899;
    }
  }
  .iconright {
    font-size: 16px;
    color: #29a794;
    margin-left: 8px;
  }
  .iconwrong {
    font-size: 14px;
    color: #ff4240;
    margin-left: 8px;
  }
  .correct {
    font-size: 14px;
    color: #1277eb;
    border: 1px solid #1277eb;
    padding: 0px 2px;
    margin-left: 10px;
    cursor: pointer;
  }
  .analysis-box {
    .analysis-title {
      color: #474747;
      font-weight: bold;
    }
    .analysis-content {
      color: #474747;
    }
  }
  //归档显示
  .showicon {
    display: none;
    .showicon-right {
      font-size: 24px;
      color: #29a794;
      margin-left: 8px;
    }
    .showicon-wrong {
      font-size: 24px;
      color: #ff4240;
      margin-left: 8px;
    }
  }
  //190717
  background: #f8f8f8;
  .stu-answer {
  }
  .markdown-body {
    font-size: 14px !important;
  }

  img {
    max-width: 100%;
  }
  .underline {
    text-decoration: underline;
  }
  .font16 {
    font-size: 16px;
    line-height: 40px;
  }
  //选择题答案下划线
  .chose-item {
  }
  .question-score {
    .el-input {
      width: auto;
      .el-input__inner {
        width: 58px;
      }
    }
  }
  .preview-top {
    position: relative;
    z-index: 1;
    height: 65px;
    margin: 0px auto 0;
    .preview-top1 {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #101937;
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        span {
          margin-right: 40px;
        }
        .preview-title {
          font-size: 18px;
          margin-right: 0;
        }
        .preview-line {
          margin: 0 6px;
        }
      }
    }
    .preview-top2 {
      margin-top: 0;
      width: 100%;
      line-height: 80px;
      position: fixed;
      top: 60px;
      padding: 0;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
        .button-style {
          margin-left: 20px;
        }
        .download-pdf {
          float: left;
          cursor: pointer;
        }
      }
      .preview-top-content2 {
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        padding-bottom: 30px;
      }
    }
  }
  .preview-content {
    width: 1200px;
    margin: 40px auto 20px;
    color: $title-gray;
    padding: 0 40px;
    overflow: hidden;
    // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    p {
      display: inline;
    }
    .tq-title {
      color: $title-gray;
      font-size: 16px;
      line-height: 40px;
    }
    dl {
      padding-left: 20px;
    }
    dt,
    dd {
      font-size: 14px;
      //190717
      line-height: 24px;
      //190717
    }
    //190717
    dt {
      margin-bottom: 20px;
    }
    //190717
    dd {
      padding-left: 20px;
    }
    .btn-group {
      text-align: center;
      .button-style {
        margin: 40px 5px;
      }
    }
  }
  .question-assess {
    // overflow: hidden;
    height: 150px;
    margin-top: 20px;
    margin-bottom: 45px;
    .title {
      // float: left;
      width: 4%;
      display: inline-block;
      vertical-align: top;
      font-size: 16px;
      color: #385899;
    }
    .el-textarea {
      // float: left;
      width: 90%;
      height: 150px;
      textarea {
        resize: none;
      }
    }
  }
  .el-table--border::after, .el-table--group::after, .el-table::before{
    background-color:#fff;
  }
}
</style>